import { ref, createApp, defineAsyncComponent } from 'vue'
import jquery from 'jquery'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import styles from './style.module.less'
import installg from '../g.js'
import { template } from 'lodash-es';
function _createdialog(options) {
        const dialogVisible = ref(true);
        const loading=ref(false);
        var _promiseresolve=undefined;
        var _promisereject=undefined;
        options._promise=new Promise((reslove,reject)=>{
    _promiseresolve=reslove;
    _promisereject=reject;
});

    var modifycom = undefined;
var footerCom= undefined;



    function handleClose() {
        console.log('handleClose :');
        dialogVisible.value= false
        _promisereject({success:false})
    }

function onOpened(){
var self=this;
self.$nextTick(function(){
self.$refs?.['modifyref']?.initByDialog(options?.data?.())

self.$refs?.['footerRef']?.initByDialog({
 dialogCom:self,
 modifyCom:self.$refs?.['modifyref']
})



})

}

async function SubmitEvent(){
var self=this;
    loading.value=true
setTimeout(() => {
    loading.value=false;
    dialogVisible.value= false
}, 1000*10);


    var  resuit=await (self.$refs?.['modifyref']?.submitByDialog())
    loading.value=false;
if(resuit?.success){
    dialogVisible.value= false
    _promiseresolve(resuit)
}
}


    if (typeof (options.components.modify) === 'function') {
        // app.component('modify', defineAsyncComponent(options.components.modify))
        modifycom = defineAsyncComponent(options.components.modify)
    } else {
        // app.component('modify', options.components.modify)
        modifycom = options.components.modify
    }


    if (typeof (options.components.footer) === 'function') {
        // app.component('modify', defineAsyncComponent(options.components.modify))
        footerCom = defineAsyncComponent(options.components.footer)
    } else {
        // app.component('footer', options.components.footer)
        footerCom = options.components.footer
    }



    return {
        name: 'mydialog',
            data(){
                        return {
                        }
            },
methods:{
    handleClose
},
        render(context) {
            handleClose=handleClose.bind(context)
            onOpened=onOpened.bind(context)
            SubmitEvent=SubmitEvent.bind(context);


            return (<el-dialog draggable
                v-model={dialogVisible.value}
                title={options?.title}
                width={options?.width||500}
                beforeClose={handleClose}
                onOpened={onOpened}
      close-on-click-modal={options?.closeOnClickModal}
            
            >
                <modifycom ref='modifyref' style="max-height:90vh;overflow:auto;"></modifycom>
               <div
                    v-slot:footer
                    class={['dialog-footer',styles?.dialogfooter]}>
                    {footerCom&&<footerCom ref="footerRef"></footerCom>}
                        {!footerCom&&(<>  <el-button onClick={() => {
                                                dialogVisible.value = false
                                                _promisereject({success:false})
                                            }}>Cancel</el-button>
                                            <el-button type="primary"
                    loading={loading.value}
                    onClick={
                                                () => {
                                                    SubmitEvent()
                                                }
                                            }>
                                                确定
                                            </el-button></>)}
                      
                    </div>
                   

            </el-dialog>)
        }
    }



}


export default function (options) {

    var divdom = jquery('<div class="mydialogcom"></div>')
    jquery('#modaldom_123').append(divdom);


    options._promise=undefined;
    var reult = _createdialog(options);
    var dialog = createApp({
        ...reult,
    })
    dialog.use(ElementPlus, { size: 'mini' })

    dialog.mount(divdom[0])
installg(dialog)



    return options._promise






}
